<template>
  <a-sub-menu :key="props.menuInfo.name" v-bind="$attrs">
    <template #icon v-if="props.menuInfo.meta.icon">
      <createIcon :icon="props.menuInfo.meta.icon" />
    </template>
    <template #title>
      <span>
        <span>{{ props.menuInfo.meta.title }}</span>
      </span>
    </template>
    <template v-for="item in props.menuInfo.children" :key="item.name">
      <template v-if="!item.meta.hidden">
        <template v-if="!item.children">
          <a-menu-item :key="item.name" @click="clickMenu(item)">
            <template #icon v-if="item.meta.icon">
              <createIcon :icon="item.meta.icon" />
            </template>
            <span>
              {{ item.meta.title }}
            </span>
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.name" />
        </template>
      </template>
    </template>
  </a-sub-menu>
</template>

<script>
  export default {
    name: 'SubMenu',
  };
</script>

<script setup>
  import { useRouter, useRoute } from 'vue-router';
  import createIcon from '@/utils/createIcon.js';
  const router = useRouter();
  const props = defineProps({
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  });
  const clickMenu = (item) => {
    router.push({ name: item.name });
  };
</script>

<style lang="less" scoped></style>
